<template>
  <div>
    <base-list ref="arrivalForecastList"
               :condition="condition"
               :datas.sync="data"
               :pageSearch="pageSearch">
      <el-form :inline="true"
               :model="condition"
               class="search-form"
               slot="search"
               label-width="100px">
        <el-row>
          <el-col :span="8"
                  class="search-width6">
            <el-form-item label="到达预报单号">
              <el-input type="text"
                        v-model="condition['search_LIKE_barcode']"
                        placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8"
                  class="search-width6">
            <el-form-item label="货主">
              <auto-search-name v-model="condition['search_EQ_cargoOwnerId']"
                                placeholder="请选择"
                                @selectId="v=>condition['search_EQ_cargoOwnerId']=v"
                                :name="form.cargoOwnerName"></auto-search-name>
            </el-form-item>
          </el-col>
          <el-col :span="8"
                  class="search-width6">
            <el-form-item label="车船号">
              <el-input type="text"
                        v-model="condition['search_LIKE_barcode']"
                        placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8"
                  class="search-width6">
            <el-form-item label="运输方式">
              <el-select v-model="condition['search_EQ_contractStatus']"
                         placeholder="请选择"
                         clearable
                         filterable>
                <el-option v-for="[key, val] in _dictContractStatus"
                           :key="key"
                           :label="val"
                           :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8"
                  class="search-width6">
            <el-form-item label="预报来源">
              <el-select v-model="condition['search_EQ_contractStatus']"
                         placeholder="请选择"
                         clearable
                         filterable>
                <el-option v-for="[key, val] in _dictContractStatus"
                           :key="key"
                           :label="val"
                           :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width8">
            <el-form-item label="创建时间">
              <el-date-picker style="width:150px;"
                              v-model="condition['search_GTE_createDateTime']"
                              type="date"
                              placeholder="选择日期"
                              value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker> 至
              <el-date-picker style="width:150px;"
                              v-model="condition['search_LTE_createDateTime']"
                              type="date"
                              placeholder="选择日期"
                              value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5"
                  class="search-width8">
            <el-form-item label="确报时间">
              <el-date-picker style="width:150px;"
                              v-model="condition['search_GTE_createDateTime']"
                              type="date"
                              placeholder="选择日期"
                              value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker> 至
              <el-date-picker style="width:150px;"
                              v-model="condition['search_LTE_createDateTime']"
                              type="date"
                              placeholder="选择日期"
                              value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary"
                       icon="el-icon-search"
                       @click="loadData">查 询</el-button>
            <el-button formVisible="true"
                       icon="el-icon-refresh"
                       @click="resuleBtn('aList')">
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table slot="list"
                :data="data"
                border
                stripe
                max-height="550">
        <el-table-column type="index"
                         label="序号"
                         width="50"
                         align="center"></el-table-column>
        <el-table-column prop="entrustNo"
                         label="到达预报单号"
                         width="120"></el-table-column>
        <el-table-column prop="status"
                         label="状态"
                         width="100">
          <template slot-scope="scope">
            {{ scope.row.status | _filterPreStatus}}
          </template>
        </el-table-column>
        <el-table-column prop="cargoOwnerName"
                         label="货主"
                         width="150"></el-table-column>
        <el-table-column prop="transhipNo"
                         label="车船号"
                         width="100"></el-table-column>
        <el-table-column prop="forecastNum"
                         label="预计件数"
                         width="100"></el-table-column>
        <el-table-column prop="forecastWeight"
                         label="预计重量（吨）"
                         width="120"></el-table-column>
        <el-table-column prop="transportWay"
                         label="运输方式"
                         width="100">
          <template slot-scope="scope">
            {{ scope.row.transportWay | _filterTransportModeType}}
          </template>
        </el-table-column>
        <el-table-column prop="startOffDate"
                         label="物资发运时间"
                         width="120"></el-table-column>
        <el-table-column prop="forecastArrivalDate"
                         label="预计到达时间"
                         width="120"></el-table-column>
        <el-table-column prop="sourceFrom"
                         label="预报来源"
                         width="100">
          <template slot-scope="scope">
            {{ scope.row.sourceFrom | _filterPresource}}
          </template>
        </el-table-column>
        <el-table-column prop="createBy"
                         label="创建人"
                         width="100"></el-table-column>
        <el-table-column prop="createDateTime"
                         label="创建时间"
                         width="120"></el-table-column>
        <el-table-column prop="confirmBy"
                         label="确报人"
                         width="100"></el-table-column>
        <el-table-column prop="confirmTime"
                         label="确报时间"
                         width="120"></el-table-column>
        <el-table-column label="操作"
                         align="center"
                         width="240"
                         fixed="right">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       @click="handleDialogForm(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </base-list>
    <div style="text-align:center">
      <el-button plain
                 type="info"
                 plain
                 @click="handleRouterPush({path: '/goods/enter',name: '入库作业平台'})">返回</el-button>
    </div>
    <view-arrival-forecast-form ref="viewArrivalForecastForm"></view-arrival-forecast-form>
  </div>
</template>

<script>
import { getArrivalForecastList,getArrivalForecastDetail } from '@/api/enter/arrivalForecast'
import autoSearchName from '@/components/autocomplete/autoSearchName'//货主
import viewArrivalForecastForm from './viewArrivalForecastForm'
import { maxLength, sortLength } from '@/utils/rules'

export default {
  name: 'arrivalForecastList',
  components: {
    autoSearchName,
    viewArrivalForecastForm
  },
  data() {
    return {
      form: this.clearForm(),
      condition: {}, // 查询条件
      pageSearch: getArrivalForecastList, // 分页查询api接口
      data: [], // table数组
      multipleSelection: [],
      total: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.loadData()
    })
  },
  methods: {
    clearForm() {
      return {}
    },
    loadData() {
      this.$refs.arrivalForecastList.loadData()
    },
    //查看
    handleDialogForm(item) {
       getArrivalForecastDetail(item.entrustNo).then(res => {
        console.log('data', res.data)
        this.$refs.viewArrivalForecastForm.form = res.data
      })
      this.$refs.viewArrivalForecastForm.dialogForm = true
    },
    //删除
    handleRemove(item) {
      this.$confirm(`是否删除该数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteCargo(item.id).then(res => {
            this.$message({
              type: 'success',
              message: `删除成功!`
            })
            this.loadData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    //获取批量删除的数据
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //批量删除
    handleRemoveAll(item) {
      this.$confirm(`是否删除选中的数据?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          item.forEach(i => {
            deleteCargo(i.id).then(res => {
              this.$message({
                type: 'success',
                message: `删除成功!`
              })
              this.loadData()
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    //重置
    resuleBtn(aList) {
      this.$refs[aList].resetFields()
      this.condition = this.clearForm()
    },
    //返回
    handleRouterPush(val) {
      this.$store.commit('ADD_CACHED_VIEWS', val)
      this.$router.push(val.path)
    }
  }
}
</script>

<style scoped>
.content {
  /* background: #ffffcf; */
}
.tagName {
  color: blue;
  cursor: pointer;
}
</style>
